<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <title>{notempty name="title"}{$title}{/notempty}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="/static/tpamis/amis-sdk/sdk.css" />
    <link rel="stylesheet" href="/static/tpamis/amis-sdk/helper.css" />
    <link rel="stylesheet" href="/static/tpamis/amis-sdk/iconfont.css" />
    <link rel="stylesheet" href="/static/tpamis/amis-sdk/antd.css" />
    <!-- <link rel="stylesheet" href="/static/tpamis/amis-sdk/cxd.css" /> -->
    <!-- <link rel="stylesheet" href="/static/tpamis/amis-sdk/ang.css" /> -->
    <!-- <link rel="stylesheet" href="/static/tpamis/amis-sdk/dark.css" /> -->
    <!-- Stylesheets -->
    <!-- Page JS Plugins CSS -->

    {notempty name="extend_css_list"}
    {volist name="extend_css_list" id="css"}
    <link rel="stylesheet" href="{$css}?v={:time()}">
    {/volist}
    {/notempty}


    <style>
        html,
        body,
        .app-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    {notempty name="page_style"}
    <style>     
    {php} echo arrayToCsses($page_style); {/php}    
    {/notempty}

</style>
    {block name="page_style"}{/block}
</head>

<body>
    <div id="root" class="app-wrapper"></div>
    <script src="/static/tpamis/amis-sdk/sdk.js"></script>

    <!-- Page JS Plugins -->

    {notempty name="extend_js_list"}
    {volist name="extend_js_list" id="js"}
    <script src="{$js}?v={:time()}"></script>
    {/volist}
    {/notempty}

    <script type="text/javascript">
        (function () {
        function ajaxImage(value, row, index) {
            // value是当前单元格值，即图片ID列表
            if (!value || !value.length) {
            return "无图片";
            }
            
            // 创建一个容器元素
            const container = document.createElement('div');
            container.style.display = 'flex';
            container.style.gap = '8px';
            
            // 异步请求获取图片地址
            fetch(`/api/attachments?ids=${value.join(',')}`)
            .then(response => response.json())
            .then(images => {
                // 清空容器
                container.innerHTML = '';
                
                // 遍历图片地址并创建img标签
                images.forEach(img => {
                const imgElement = document.createElement('img');
                imgElement.src = img.url;
                imgElement.alt = img.name || '图片';
                imgElement.style.width = '80px';
                imgElement.style.height = '80px';
                imgElement.style.objectFit = 'cover';
                imgElement.style.borderRadius = '4px';
                container.appendChild(imgElement);
                });
            })
            .catch(error => {
                container.innerHTML = '加载图片失败';
                console.error('获取图片失败:', error);
            });
            
            // 返回加载状态
            container.innerHTML = '<div>加载中...</div>';
            return container;
        }
            window.enableAMISDebug = true;
            let amis = amisRequire('amis/embed');

            {notempty name="extend_js_script"}
            {volist name="extend_js_script" id="script"}
            {$script}
            {/volist}
            {/notempty}

            // 通过替换下面这个配置来生成不同页面
            let amisJSON = {:json_encode($amisJSON, JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES|JSON_UNESCAPED_UNICODE)};
            let amisScoped = amis.embed('#root', amisJSON);
            let scrollHeight = document.body.scrollHeight - 10;
            window.parent.postMessage(
                {
                    type: 'amis:resize',
                    data: {
                        height: scrollHeight
                    }
                },
                '*'
            );
        })();
    </script>
</body>

</html>